<script>
  import { v4 as uuid } from "uuid";
  let taskInput = "";
  let taskCount = 0;
  let taskList = [
    {
      id: "1",
      task: "吃饭",
    },
    {
      id: "2",
      task: "睡觉",
    },
    {
      id: "3",
      task: "打豆豆",
    },
  ];
  const addTask = () => {
    if (taskInput.trim() == "") return;
    let id = uuid();
    taskList.push({ id, task: taskInput });
    taskInput = "";
    taskList = [...taskList];
  };
  const deleteTask = (id) => {
    console.log(id);
    taskList = taskList.filter((item) => item.id !== id);
  };
  $: taskCount = taskList.length;
</script>

<main>
  <h1>任命列表</h1>
  <div>
    <ul>
      {#each taskList as item, index (item.id)}
        <li>
          <span>{item.task}</span><button on:click={() => deleteTask(item.id)}
            >删除</button
          >
        </li>
      {/each}
    </ul>
  </div>
  <div>任务总数：{taskCount}</div>
  <div>
    <input bind:value={taskInput} placeholder="请输入任务名称" />
    <button on:click={addTask}>添加</button>
  </div>
</main>
